import React from 'react'
import './css/resetTel.less';
import http from '../../utils/http';
import {startClock} from '../../utils/common';
import {VALIDCODE, VALIDREQUIRED,VALIDATOR, VALIDPHONE} from '../../utils/valid'
// import { Toast } from '../components/Toast';

//校验验证对象
const FILEDS = {
  MSGCODE: 'msgCode',
  PHONE:'phone'
}
let mobile=''
//与FILEDS映射
const valids = {
  [FILEDS.MSGCODE]:{
    required: VALIDREQUIRED,
    valid: VALIDCODE
  },
  [FILEDS.PHONE]:{
    required: VALIDREQUIRED,
    valid: VALIDPHONE
  }
}
//校验方法
const required = (field, value) => {
  const valid = valids[field]
  let msg = VALIDATOR(valid, value)
  if (msg) {
    return <div className="text-danger is-visible">{msg}</div>;
  }
};


class ResetPwd extends React.Component {
  constructor(){
    super();
    this.validPhone = this.validPhone.bind(this);
  }
  state = {
    //手机号，验证码
    account: '',
    msgCode:'',
    oldMsgCode: '',
    isTrue:false,
    isTrueTwo:false,
    timeText:'发送验证码',
    timePsw:'发送验证码',
    isabled:true,
    isabledPwd:true,
    setCode:'',
    setPhone:'',
    // 按钮不能进行点击
    isCanclick:true
  }
  //校验验证码
  validCode(callback,e){
    if(e.target.value.length <= 4){
      this.setState({
        setCode:''
      })
    }
    if(e.target.value.length === 4){
      let msg = required(FILEDS.MSGCODE,e.target.value);
      this.setState({
        setCode:msg
      })
      callback(false)
      if(!msg){
        const msgCode = e.target.value
        this.setState({
          msgCode
        })
        
        http.get('/code/validate/msgCode',{
          params:{
            msgCode,
            mobile
          }
        })
        .then(data => {
          if(data){   
            callback(data, msgCode);
          }else{
            this.setState({
              setCode:'验证码错误'
            })
          }
        }, err => {
          
        })
      }
    }else{
      if(e.target.value.length >= 4)
        this.setState({
          setCode:'验证码输入不正确'
        })
      }
  }
  //校验手机号
  validPhone(e){
    let msg = required(FILEDS.PHONE,e.target.value);
    this.setState({
        setPhone:msg
    })
    if(!msg){
      this.setState({
        account:e.target.value
      })
    http.get('/register/isRegister',{
          params: {account: e.target.value}
        })
        .then(data=> {
          if(!data){
            this.setState({
              setPhone:''
            })
          }else{
            this.setState({
              setPhone:'手机号已注册',
              isTrueTwo:false
            })
          }
        }, err => {
          
        })
    }
  }
  // 发送验证码
  getCode = (phone) => {
    const data = {
      type: 3,
      account: phone
    }
    http.post('/code/send/msgCode', data)
    .then(data => {
    }, err => {
      
    })
  }
  resetTel = event => {
    event.preventDefault()
    //按钮不能进行点击
    this.setState({
      isCanclick:false    
    })
    // 校验
      const data = {
        newMobile: this.state.account,
        newMobileCode: this.state.msgCode,
        oldMobile: this.props.telphone,
        oldMsgCode: this.state.oldMsgCode
      }
      http.post('/register/update/', data)
      .then(data=> {
        //按钮可以点击
        this.setState({
          isCanclick:true   
        })
        // 如果返回true，那么跳转页面
        if(data){
          // Toast('修改成功!')
          this.props.ShowInfo();
        }
      }, err => {
        this.setState({
          isCanclick:true
        })
        
      })
  }
  render () {
    return (
      <div className="form-horizontal reset-Tel">
        <div  style={{display:this.state.isTrue?'none':'block'}}>
          <div className="col-xs-12 tel-change">修改手机号</div>
          <div className="form-group tel-current">
            <label className="col-md-3 col-xs-3 " style={{padding:0}}>当前登录手机号</label>
            <p className="col-md-3 col-xs-3" style={{padding:0}}>{this.props.telphone}</p>
          </div>
          <div className="form-group">
            <div className="col-md-7 col-xs-12 code set-code" style={{padding:0}}>
              {/* 验证码校验 */}
              <input
                placeholder="输入4位验证码"
                autoComplete="off"
                onChange={this.validCode.bind(this,(data, code)=>{
                  this.setState({
                    isTrue: data,
                    oldMsgCode: code
                  })
                  mobile=this.props.telphone;
                })}
                onFocus={(e)=>{e.target.placeholder=''}}
                onBlur={(e)=>{e.target.placeholder='输入4位验证码'}}
                className="input-form"
                style={{border: this.state.setCode ? '1px solid #C13431':'',width:"154px"}}/>
                <div className={this.state.setCode?'text-danger':'text-success'}>{this.state.setCode}</div>
            </div>
          {/* 倒计时开始 */}
          <div className="col-md-5 col-xs-12">
            <input type="button" className={!this.state.isabled?'active-click btn-code col-md-12 col-xs-12':'active-code btn-code col-md-12 col-xs-12'} disabled={!this.state.isabled?'disabled':''} onClick={()=>{
                          this.setState({
                              isabled:false
                          })
                          startClock(true,60,(data)=>{
                              this.setState({
                                  timeText:data
                              })
                              if(this.state.timeText==='发送验证码'){
                                  this.setState({
                                      isabled:true
                                  })
                              }
                          })
                          this.getCode(this.props.telphone)   
          }} value={this.state.timeText}/>
          </div>
        </div>
        <div
          className="form-group"
          style={{
          overflow: 'hidden'
        }}>
        </div>
        </div>
        {
          // 手机号验证
          this.state.isTrue&&!this.state.isTrueTwo?<div className="input-group col-xs-12">
          <h4 className="col-xs-12">修改手机号</h4>
          <div className="col-xs-12">新手机号</div>
            <div className="col-xs-8 code set-code input-tels">
                    <input type="text" placeholder="输入最新的手机号" autoComplete="off" 
                    onFocus={(e)=>{e.target.placeholder=''}}
                    className="input-form"
                    onBlur={(e)=>{e.target.placeholder='输入最新的手机号';this.validPhone(e)}}
                    style={{border: this.state.setPhone==="手机号已注册" ? '1px solid #C13431':''}}/>
                    <div className={this.state.setPhone==="手机号已注册"?'text-danger':'text-success'}>{this.state.setPhone}</div>
            </div>
            <div className="form-group col-xs-12">
                <div className="col-md-7 col-xs-12 code set-code">
                {/* 校验码校验 */}
                    <input
                    placeholder="输入4位验证码"
                    className="input-form"
                    onFocus={(e)=>{e.target.placeholder='';
                      this.setState({
                        isTrueTwo:false
                      })
                  }}
                    onBlur={(e)=>{e.target.placeholder='输入4位验证码'}}
                     autoComplete="off" onChange={this.validCode.bind(this,(data)=>{
                      if(this.state.setPhone === ''){
                        if(data){
                          this.setState({
                            isTrueTwo:data,
                            setCode:'输入正确'
                          })
                        }else{
                          this.setState({
                            isTrueTwo:data
                          })
                        }  
                        mobile = this.state.account
                      }
                    }
                  )}
                    style={{border: this.state.setCode ? '1px solid #C13431':''}}/>
                    <div className={this.state.setCode?'text-danger':'text-success'}>{this.state.setCode}</div>
                </div>
                {/* 验证码校验 */}
            <div className="col-md-5 col-xs-12"><input type="button" className={!this.state.isabled?'active-click btn-code col-md-12 col-xs-12':'active-code btn-code col-md-12 col-xs-12'} disabled={!this.state.isabledPwd?'disabled':''} onClick={()=>{
                    if(this.state.setPhone === ''){
                      this.setState({
                          isabledPwd:false
                      })
                      startClock(true,60,(data)=>{
                          this.setState({
                              timePsw:data
                          })
                          if(this.state.timePsw==='发送验证码'){
                              this.setState({
                                  isabledPwd:true
                              })
                          }
                      })
                      this.getCode(this.state.account)
                  }
            }}
                      value={this.state.timePsw}/></div>
            </div>
          </div>:''
        }
         {
                this.state.isTrue&&this.state.isTrueTwo? 
                  <div className="col-xs-12 complete">
                    <div className="circle-div" style={{lineHeight:"60px",fontSize:"24px",color:"#fff"}}><img alt='' src={require('../../images/icon/right.png')}/></div>
                    <h4 className="col-xs-12">修改手机号完成</h4>
                    <div className="col-xs-12 set-code know-tel">
                      <input type="button" className="btn-float" style={{float:'none',boxShadow:"none"}} disabled={this.state.isCanclick?'':'disabled'} value="知道了" onClick={event => this.resetTel(event)}/>
                    </div>
                  </div>:''
            }
      </div>
      
    )
  }
}
export default ResetPwd